<script>
import { fade, fly } from 'svelte/transition'
import { flip } from 'svelte/animate'
import { toast } from './stores.js'
import ToastItem from './ToastItem.svelte'

/** @type {import('./stores.js').SvelteToastOptions} */
export let options = {}
/** @type {(string|'default')} */
export let target = 'default'

/** @type {import('./stores.js').SvelteToastOptions[]} */
let items = []

/** @param {Object<string,string|number>} [theme] */
function getCss(theme) {
  return theme ? Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '') : undefined
}

$: toast._init(target, options)

$: items = $toast.filter((i) => i.target === target)
</script>

<ul class="_toastContainer">
  {#each items as item (item.id)}
    <li
      class={item.classes?.join(' ')}
      in:fly={item.intro}
      out:fade
      animate:flip={{ duration: 200 }}
      style={getCss(item.theme)}
    >
      <ToastItem {item} />
    </li>
  {/each}
</ul>

<style>
._toastContainer {
  top: var(--toastContainerTop, 1.5rem);
  right: var(--toastContainerRight, 2rem);
  bottom: var(--toastContainerBottom, auto);
  left: var(--toastContainerLeft, auto);
  position: fixed;
  margin: 0;
  padding: 0;
  list-style-type: none;
  pointer-events: none;
  z-index: var(--toastContainerZIndex, 9999);
}
</style>
